<script lang="ts">
	// 定义边框方向类型
	type BorderDirection = 'all' | 'top' | 'right' | 'bottom' | 'left' | 'horizontal' | 'vertical';
	// 定义边框样式类型
	type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';

	// 组件属性
	export let direction: BorderDirection = 'horizontal';
	export let style: BorderStyle = 'solid';
	export let color: string = 'var(--color-border)';
	export let width: string = '1px';
	export let radius: string = '0';
	export let margin: string = '16px';
	export let className: string = '';
</script>

<div
	class="border-container {className}"
	style="      
      border-radius: {radius};
      {direction === 'all' && `;border: ${width} ${style} ${color};width: 100%;height: 100%;`}
      {direction === 'top' && `;border-top: ${width} ${style} ${color};width: 100%;`}
      {direction === 'right' && `;border-right: ${width} ${style} ${color};height: 100%;`}
      {direction === 'bottom' && `;border-bottom: ${width} ${style} ${color};width: 100%;`}
      {direction === 'left' && `;border-left: ${width} ${style} ${color};height: 100%;`}
      {direction === 'horizontal' &&
		`;
        margin: ${margin} 0;
        border-bottom: ${width} ${style} ${color};
		width: 100%;
      `}
      {direction === 'vertical' &&
		`;
		margin: 0 ${margin};
        border-right: ${width} ${style} ${color};
		height: 100%;
      `}
    "
>
	<!-- 内容插槽 -->
	<slot />
</div>

<style>
	.border-container {
		box-sizing: border-box;
	}
</style>
